<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img {
            width: 440px;
            height: 180px;
        }
    </style>
</head>

<body>

    <div id="app">
        <img class="img" :src="list[count]" alt="">
        <button @click="right">》</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>

        new Vue({
            // 元素
            el: "#app",
            // 定义的数据(状态)
            data: {
                count: 0,
                timer: null,
                list: [
                    "https://img0.baidu.com/it/u=3798217922,3880088897&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1657126800&t=9213342506d6cdf2a02b5e97ea87c2a2",
                    "https://img1.baidu.com/it/u=3569420573,2690721824&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1657126800&t=f14f25968dfe7f1cde3f4836e4a5972f",
                    "https://img0.baidu.com/it/u=1149498394,1442276907&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1657126800&t=a996701afa61370424d473c16d36d478"
                ]
            },
            created() {
                this.timer = setInterval(() => {
                    this.right()
                }, 1500)
            },
            methods: {
                right() {
                    if (this.count === this.list.length - 1) {
                        this.count = 0
                    } else {
                        this.count += 1
                    }
                }
            }
        })
    </script>
</body>

</html>